<%--
  Created by IntelliJ IDEA.
  User: 40334
  Date: 2023/2/4
  Time: 20:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="styles/common.css"/>
    <style type="text/css">
        #divfrom{
            float:left;
            width:150px;
        }
        #divto{
            float:left;
            width:150px;
        }
        #divoperator{
            float:left;
            width:50px;
            padding:60px 5px;
        }
        #divoperator input[type="button"]{
            margin:10px 0;
        }
        #selDepartments{
            display:block;
            width:100%;
        }
        #selEmployees{
            display:block;
            width:100%;
            height:200px;
        }
        #selSelectedEmployees{
            display:block;
            width:100%;
            height:225px;
        }
    </style>
    <script type="application/javascript">function combineTime() {
        let startTime = document.getElementById("start_time");
        let start1 = document.getElementById("startdate").value;
        let start2 = document.getElementById("starttime").value;
        startTime.value = start1 + " " + start2;
        let endTime = document.getElementById("end_time");
        let end1 = document.getElementById("enddate").value;
        let end2 = document.getElementById("endtime").value
        endTime.value = end1 +' ' + end2 ;
        console.log(endTime);
    }

    function getSelectedEmps() {
            let selectedEmps = document.getElementById("selSelectedEmployees");
            let finalValue = "";
            console.log(selectedEmps);
            for(let i = 0;i < selectedEmps.options.length;i++){
                finalValue += selectedEmps.options[i].value;
                if(i !== selectedEmps.options.length - 1){
                    finalValue += ",";
                }
            }
            console.log(finalValue);
            let uploadField = document.getElementById("meeting_emps");
            uploadField.value = finalValue;
        }

    function employee(employeeid, employeename){
            this.employeeid = employeeid;
            this.employeename = employeename;
        }
        function department(departmentid, departmentname, employees){
            this.departmentid = departmentid;
            this.departmentname = departmentname;
            this.employees = employees;
        }
        console.log("${requestScope.records}");
        var data = [ <c:forEach var="record" items="${records}" varStatus="deptStatus">

                new department(${record.dept.deptno},"${record.dept.deptName}", [<c:forEach var="emp" items="${record.empList}" varStatus="empStatus">
                        new employee(${emp.empno},"${emp.empName}")
                    <c:if test="${not empStatus.last}"> , </c:if>
                    </c:forEach>])
                <c:if test="${not deptStatus.last}"> , </c:if>
        </c:forEach> ];
        // var data =  [new department(1, "技术部", [new employee(1001, "a00"), new employee(1002, "a01"), new employee(1003, "a02"), new employee(1004, "a03")]),
        //     new department(2, "销售部", [new employee(2001, "b00"), new employee(2002, "b01"), new employee(2003, "b02"), new employee(2004, "b03")]),
        //     new department(3, "市场部", [new employee(3001, "c00"), new employee(3002, "c01"), new employee(3003, "c02"), new employee(3004, "c03")]),
        //     new department(4, "行政部", [new employee(4001, "d00"), new employee(4002, "d01"), new employee(4003, "d02"), new employee(4004, "d03")])];

        var selDepartments;
        var selEmployees;
        var selSelectedEmployees;

        function body_load(){
            selDepartments = document.getElementById("selDepartments");
            selEmployees = document.getElementById("selEmployees");
            selSelectedEmployees = document.getElementById("selSelectedEmployees");

            for(var i=0;i<data.length;i++){
                var dep = document.createElement("option");
                dep.value = data[i].departmentid;
                dep.text = data[i].departmentname;
                selDepartments.appendChild(dep);
            }

            fillEmployees();
        }

        function fillEmployees(){
            clearList(selEmployees);
            var departmentid = selDepartments.options[selDepartments.selectedIndex].value;
            var employees;
            for(var i=0;i<data.length;i++){
                if (departmentid == data[i].departmentid){
                    employees = data[i].employees;
                    break;
                }
            }
            for(i=0;i<employees.length;i++){
                var emp = document.createElement("option");
                emp.value = employees[i].employeeid;
                emp.text = employees[i].employeename;
                selEmployees.appendChild(emp);
            }
        }

        function clearList(list){
            while(list.childElementCount > 0){
                list.removeChild(list.lastChild);
            }
        }

        function selectEmployees(){
            for(var i=0;i<selEmployees.options.length;i++){
                if (selEmployees.options[i].selected){
                    addEmployee(selEmployees.options[i]);
                    selEmployees.options[i].selected = false;
                }
            }
            getSelectedEmps();
        }

        function deSelectEmployees(){
            var elementsToRemoved = new Array();
            var options = selSelectedEmployees.options;
            for(var i=0;i<options.length;i++){
                if (options[i].selected){
                    elementsToRemoved.push(options[i]);
                }
            }
            for(i=0;i<elementsToRemoved.length;i++){
                selSelectedEmployees.removeChild(elementsToRemoved[i]);
            }
        }

        function addEmployee(optEmployee){
            var options = selSelectedEmployees.options;
            var i = 0;
            var insertIndex = -1;
            while(i < options.length){
                if (optEmployee.value == options[i].value){
                    return;
                } else if (optEmployee.value < options[i].value) {
                    insertIndex = i;
                    break;
                }
                i++;
            }
            var opt = document.createElement("option");
            opt.value = optEmployee.value;
            opt.text = optEmployee.text;
            opt.selected = true;

            if (insertIndex == -1){
                selSelectedEmployees.appendChild(opt);
            } else {
                selSelectedEmployees.insertBefore(opt, options[insertIndex]);
            }
        }
    </script>
</head>
<body onload="body_load()">
<div class="page-content">
    <div class="content-nav">
        会议预定 > 预定会议
    </div>
    <form action="MainServlet" method="post">
        <input type="hidden" name="dest" value="meeting.bookMeeting">
        <fieldset>
            <legend>会议信息</legend>
            <table class="formtable">
                <tr>
                    <td>会议名称：</td>
                    <td>
                        <input type="text" id="meetingname" name="meeting_name" maxlength="20"/>
                    </td>
                </tr>
                <tr>
                    <td>预计参加人数：</td>
                    <td>
                        <input type="text" id="numofattendents" name="expected_person_count" />
                    </td>
                </tr>
                <tr>
                    <td>预计开始时间：</td>
                    <td>
                        <input type="hidden" id="start_time" name="start_time">
                        <input type="date" id="startdate" name="startdate" onchange="combineTime()"/>
                        <input type="time" id="starttime" name="starttime" onchange="combineTime()"/>
                    </td>
                </tr>
                <tr>
                    <td>预计结束时间：</td>
                    <td>
                        <input type="hidden" id="end_time" name="end_time">
                        <input type="date" id="enddate" name="enddate" onchange="combineTime()"/>
                        <input type="time" id="endtime" name="endtime" onchange="combineTime()"/>
                    </td>
                </tr>
                <tr>
                    <td>会议说明：</td>
                    <td>
                        <textarea id="description" rows="5" name="description"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>选择参会人员：</td>
                    <td>
                        <div id="divfrom">
                            <select id="selDepartments" onchange="fillEmployees()">
                            </select>
                            <select id="selEmployees" multiple="true">
                            </select>
                        </div>
                        <div id="divoperator">
                            <input type="button" class="clickbutton" value="&gt;" onclick="selectEmployees()"/>
                            <input type="button" class="clickbutton" value="&lt;" onclick="deSelectEmployees()"/>
                        </div>
                        <div id="divto">
                            <select id="selSelectedEmployees" multiple="true" >
                            </select>
                        </div>
                        <div id="hidden-meeting-emps">
                            <input type="hidden" id="meeting_emps" name="meeting_emps">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="command" colspan="2">
                        <input type="submit" class="clickbutton" value="预定会议" onsubmit="submitPrev()"/>
                        <input type="reset" class="clickbutton" value="重置"/>
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</div>
</body>
</html>
